<template>
  <div class="radioForm-container">
    <el-form-item :label="title" :prop="prop">
      <el-radio-group v-model="radio" :disabled="disabled">
        <el-radio
          v-for="(item, index) in items"
          :key="index"
          :label="item.label"
        >
          {{ item.value }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
  </div>
</template>
<script>
  import { computed } from 'vue'
  export default {
    name: 'radioForm',
    props: {
      title: String,
      items: Array,
      modelValue: [String, Number],
      disabled: Boolean,
      prop: String,
    }, // [{label: null, value: null}]
    setup(props, context) {
      let radio = computed({
        set(val) {
          context.emit('update:modelValue', val)
        },
        get() {
          return props.modelValue + ''
        },
      })
      return {
        radio,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .radioForm-container {
    overflow: hidden;
    margin-top: 20px;
    :deep(.el-form-item__label) {
      color: #303133;
      padding: 0px auto;
      font-size: 17px;
    }
    .el-radio-group {
      padding-left: 12px;
      font-size: 16px !important;
    }
  }
</style>
